<template>
	<vk-data-drawer
		v-model="value.show"
		:title="page.title"
		:top="page.top"
		:width="page.width"
		:close-on-click-modal="true"
		@open="onOpen"
		@closed="onClose"
	>
		<!-- 页面主体内容开始 -->
		<vk-data-mobile-preview :type="mobile.type" :url="value.url"></vk-data-mobile-preview>

		<view class="preview-drawer-btn">
			<button type="button" class="el-button table-btn el-button--default is-round" :class="{active:mobile.type === 'iphone'}" @click="mobile.type = 'iphone'">
				<span>iphone</span>
			</button>
			<button type="button" class="el-button table-btn el-button--default is-round" :class="{active:mobile.type === 'iphonex'}" @click="mobile.type = 'iphonex'">
				<span>iphonex</span>
			</button>
			<button type="button" class="el-button table-btn el-button--default is-round" :class="{active:mobile.type === 'qrcode'}" @click="mobile.type = 'qrcode'">
				<span>二维码</span>
			</button>
			<button type="button" class="el-button return-btn el-button--default is-round" @click="close">
				<i class="el-icon-back"></i>
				<span>返回</span>
			</button>
		</view>

		<!-- 页面主体内容结束 -->
	</vk-data-drawer>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
	props: {
		value: {
			Type: Object,
			default: function() {
				return {
					show: false,
					mode: "",
					item: {},
					url:''
				};
			}
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			mobile:{
				type: "iphone"
			},
			page: {
				title: "商品预览",
				submitText: "确定",
				cancelText: "关闭",
				showCancel: true,
				top: "7vh",
				width: "500px"
			},
			form1: {
				// 表单请求数据，此处可以设置默认值
				data: {},
				// 表单属性
				props: {
					// 表单请求地址
					action: "",
					// 表单字段显示规则
					columns: [{ key: "name", title: "名称", type: "text" }],
					// 表单验证规则
					rules: {},
					// 左侧label的宽度
					labelWidth: "100px"
				}
			}
		};
	},
	mounted() {
		that = this;
		that.init();
	},
	methods: {
		// 初始化
		init() {
			let { value } = that;
			that.$emit("input", value);
		},
		// 监听 - 页面打开
		onOpen() {
			that = this;
			let { item = {} } = that.value;
			// 每次打开时，重新设置表单的值 = value.item 的值，item通过 vk.pubfn.openForm('表单名',{ item:{ _id:"1" } }) 传递值
			that.form1.data = vk.pubfn.copyObject(item);
		},
		// 监听 - 页面关闭
		onClose() {
			//that.$refs.form1.resetForm(); // 关闭时，重置表单
		},
		close(){
			that.$emit("input", false);
		},
		// 监听 - 提交成功后
		onFormSuccess() {
			that.value.show = false; // 关闭页面
			that.$emit("success");
		}
	},
	watch: {},
	// 计算属性
	computed: {}
};
</script>

<style lang="scss" scoped>
.preview-drawer-btn {
	width: 100%;
	bottom: 10px;
	right: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	.table-btn.active,
	.table-btn:hover {
		color: #409eff !important;
		background-color: #ecf5ff !important;
		border-color: #ecf5ff !important;
	}
}
</style>
